@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
.web{
    width: r(640);
    height: r(800);
}
        header {
            .top {
                ul {
                    width: r(640);
                    height: r(75);
                    border-bottom: 1px solid #A7A7A7;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    li {
                        display: flex;
                        align-items: center;
                        font-size: r(30);
                        color: #343434;
                        a {
                            display: flex;
                            align-items: center;
                            margin: 0 r(29);
                            font-size: r(24);
                            color: #585858;
                            img {
                                height: r(38);
                            }
                        }
                    }
                    .con{
                        margin: 0 auto;
                        transform: translate(-35%);
                    }
                }
            }
            
        }
.conter{
    width: r(640);
    .block{
        margin:  0 auto;
        width: r(584);
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: r(98);
        border-bottom: 1px solid #A7A7A7;
        ul{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            li{
                font-size: r(30);
                padding-left:r(24);
            }
            li:first-of-type{
                color: #737373;
            }
            li:last-of-type{
                color: #343434;
            }
        }
        .img{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img{
                width: r(15);
            }
            .img_co{
                padding-right: r(13);
                .code{
                width:r(35);
                }
            }
            
        }
        .label{
            height: r(90);
        }
        .btn{
            width: r(100);
            height: r(60);
            background-color: #FFFFFF;
            border: 1px solid #B2B2B2;
            border-radius: r(30);
            display: flex;
            justify-content: flex-end;
            padding-left: r(2);
            align-items: center;
        }
        #active,#active-a,#active-b{
            display: none;
        }
        #active:checked+.btn,#active-a:checked+.btn,#active-b:checked+.btn{
            width: r(100);
            height: r(60);
            background-color: #000000;
            border-radius: r(30);
            display: flex;
            justify-content: flex-start;
            padding-right: r(2);
            align-items: center;
        }
        .cir{
                width: r(57);
                height: r(57);
                border-radius:50%;
                background-color: #ffffff;
                border: 1px solid #B2B2B2;
            }
    }
    .line{
        border: none;
    }
    .cir_message{
        width: r(640);
        background: #F2F2F2;
        height:r(60) ;
        ul{
            width: r(584);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            li{
                font-size: r(24);
                color: #737373;
                padding-left: r(53);
                line-height: r(60);
                span{
                   color: #343434;
                   padding-left: r(18); 
                }
            }
        }
    }
    .people_num{
        width: r(584);
        margin: r(30) auto 0;
        background: #F2F2F2;
        border: 1px solid #828282;
        border-radius: r(6);
        .peo_h{
            margin: r(30) auto 0;
            width: r(548);
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                font-size: r(20);
                color: #626262;
                a{
                    color: #ababab;
                }
            }
            
        }
    
        .header_img{
            margin: r(30) auto 0;
            width: r(584);
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
            li{
                text-align: center;
                width: r(120);
                img{
                   width: r(58);
                   text-align: center;
                }
                p{
                    margin-bottom:r(15);
                    font-size: r(20);
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: #2c2c2c;
                    text-align: center;
                    
                }
            }
        }
    }
}
footer{
    .btn{
        width: r(501);
        margin:  r(38) auto r(30);
        a{
            display: block;
            padding: r(20) r(90);
            text-align: center;
            background: #333333;
            border-radius:r(6);
            color: #fff;
        }
    }
}
